<template>
  <div class="container" style="padding: 10px">
    <el-card>
      <div>
        <!-- title头部区域 -->
        <div class="title">
          <span style="font-size: 12px; color: pink"
            >说明：目前支持学科和关键字条件筛选</span
          >
          <el-button
            type="success"
            icon="el-icon-edit"
            @click="$router.push('/questions/new')"
            >新增试题</el-button
          >
        </div>
        <!-- 表单提交区域 -->
        <div class="form">
          <el-form
            :model="ruleForm"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <!-- 学科类型选择区域一 -->
            <el-row>
              <el-col :span="6"
                ><div class="grid-content bg-purple">
                  <el-form-item label="学科">
                    <el-select
                      @change="change"
                      v-model="ruleForm.subjectID"
                      placeholder="请选择"
                    >
                      <el-option
                        :label="item.label"
                        :value="item.value"
                        v-for="(item, index) in subjectIDList"
                        :key="index"
                      ></el-option>
                    </el-select>
                  </el-form-item></div
              ></el-col>
              <el-col :span="6"
                ><div class="grid-content bg-purple">
                  <el-form-item label="二级目录">
                    <el-select
                      v-model="ruleForm.catalogID"
                      placeholder="请选择"
                    >
                      <el-option
                        :label="item.label"
                        :value="item.value"
                        v-for="(item, index) in catalogList"
                        :key="index"
                      ></el-option>
                    </el-select>
                  </el-form-item></div
              ></el-col>
              <el-col :span="6"
                ><div class="grid-content bg-purple">
                  <el-form-item label="标签">
                    <el-select v-model="ruleForm.tags" placeholder="请选择">
                      <el-option
                        :label="item.label"
                        :value="item.value"
                        v-for="(item, index) in tagsList"
                        :key="index"
                      ></el-option>
                    </el-select>
                  </el-form-item></div
              ></el-col>
              <el-col :span="6"
                ><div class="grid-content bg-purple">
                  <el-form-item label="关键字">
                    <el-input
                      placeholder="请输入内容"
                      v-model.trim="ruleForm.keyword"
                      clearable
                    >
                    </el-input>
                  </el-form-item></div
              ></el-col>
            </el-row>
            <!-- 类型选择区域二 -->
            <el-row>
              <el-col :span="6"
                ><div class="grid-content bg-purple">
                  <el-form-item label="试题类型">
                    <el-select
                      v-model="ruleForm.questionType"
                      placeholder="请选择"
                    >
                      <el-option label="单选" value="1"></el-option>
                      <el-option label="多选" value="2"></el-option>
                      <el-option label="简答" value="3"></el-option>
                    </el-select>
                  </el-form-item></div
              ></el-col>
              <el-col :span="6"
                ><div class="grid-content bg-purple">
                  <el-form-item label="难度">
                    <el-select
                      v-model="ruleForm.difficulty"
                      placeholder="请选择"
                    >
                      <el-option label="简单" value="1"></el-option>
                      <el-option label="一般" value="2"></el-option>
                      <el-option label="困难" value="3"></el-option>
                    </el-select>
                  </el-form-item></div
              ></el-col>
              <el-col :span="6"
                ><div class="grid-content bg-purple">
                  <el-form-item label="方向">
                    <el-select
                      v-model="ruleForm.direction"
                      placeholder="请选择"
                    >
                      <el-option
                        :label="item"
                        :value="item"
                        v-for="(item, index) in direction"
                        :key="index"
                      ></el-option>
                      <el-option label="区域一" value="shanghai"></el-option>
                      <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                  </el-form-item></div
              ></el-col>
              <el-col :span="6"
                ><div class="grid-content bg-purple">
                  <el-form-item label="录入人">
                    <el-select
                      v-model="ruleForm.creatorID"
                      placeholder="请选择"
                    >
                      <el-option
                        :key="item.id"
                        :label="item.username"
                        :value="item.id"
                        v-for="item in usersList"
                      ></el-option>
                    </el-select>
                  </el-form-item></div
              ></el-col>
            </el-row>
            <!-- 类型选择区域三 -->
            <el-row>
              <el-col :span="6"
                ><div class="grid-content bg-purple">
                  <el-form-item label="题目备注">
                    <el-input
                      placeholder="请输入内容"
                      v-model.trim="ruleForm.remarks"
                      clearable
                    >
                    </el-input>
                  </el-form-item></div
              ></el-col>
              <el-col :span="6"
                ><div class="grid-content bg-purple">
                  <el-form-item label="企业简称">
                    <el-input
                      placeholder="请输入内容"
                      v-model.trim="ruleForm.shortName"
                      clearable
                    >
                    </el-input>
                  </el-form-item></div
              ></el-col>
              <el-col :span="6"
                ><div class="grid-content bg-purple">
                  <el-form-item label="城市">
                    <el-select
                      v-model="ruleForm.province"
                      placeholder="请选择"
                      size="small"
                      style="width: 48%; margin-right: 2%"
                      @change="changeProvince"
                    >
                      <el-option
                        :key="item"
                        :value="item"
                        v-for="item in provinces"
                      ></el-option>
                    </el-select>
                    <el-select
                      v-model="ruleForm.city"
                      placeholder="请选择"
                      size="small"
                      style="width: 48%; margin-right: 2%"
                    >
                      <el-option
                        :key="item"
                        :value="item"
                        v-for="item in cityArr"
                      ></el-option>
                    </el-select>
                  </el-form-item></div
              ></el-col>
              <el-col :span="6"
                ><div class="grid-content bg-purple">
                  <el-form-item>
                    <el-button @click="resetForm">清除</el-button>
                    <el-button type="primary" @click="submitForm"
                      >搜索</el-button
                    >
                  </el-form-item>
                </div></el-col
              >
            </el-row>
          </el-form>
        </div>
        <!-- 数据表格展示区域 -->
        <questionsTable
          :ruleForm="ruleForm"
          ref="questionsTable"
        ></questionsTable>
      </div>
    </el-card>
  </div>
</template>

<script>
import { direction } from '@/api/hmmm/constants.js'
import { getSimple } from '@/api/hmmm/directorys.js'
import { getTags } from '@/api/hmmm/tags.js'
import { simple } from '@/api/hmmm/subjects.js'
import { users } from '@/api/hmmm/users.js'
import questionsTable from '../components/questions-choice-table.vue'
import { provinces, citys } from '@/api/hmmm/citys.js'
export default {
  data () {
    return {
      direction: direction,
      tagsList: [],
      catalogList: [],
      ruleForm: {
        subjectID: '',
        difficulty: '',
        questionType: '',
        tags: '',
        province: '',
        city: '',
        keyword: '',
        remarks: '',
        shortName: '',
        direction: '',
        creatorID: '',
        catalogID: '',
        chkState: ''
      },
      subjectIDList: [],
      usersList: [],
      provinces: provinces(),
      cityArr: []
    }
  },
  components: { questionsTable },
  computed: {},
  created () {
    this.getSimple()
    this.getUsers()
  },
  methods: {
    // 根据省获取城市名
    changeProvince () {
      this.ruleForm.city = ''
      return (this.cityArr = citys(this.ruleForm.province))
    },
    change () {
      this.getInfo()
    },
    // 获取学科二级目录和标签
    async getInfo () {
      const res = await getSimple(this.ruleForm.subjectID)
      this.catalogList = res.data
      const res1 = await getTags(this.ruleForm.subjectID)
      this.tagsList = res1.data
    },
    // 获取学科下拉列表
    async getSimple () {
      const { data } = await simple()
      this.subjectIDList = data
    },
    // 获取用户下拉列表
    async getUsers () {
      const { data } = await users()
      this.usersList = data
    },
    // 表单按钮功能
    submitForm () {
      this.$refs.questionsTable.getInfo()
    },
    // 清空表单
    resetForm () {
      this.ruleForm = {
        subjectID: '',
        difficulty: '',
        questionType: '',
        tags: '',
        province: '',
        city: '',
        keyword: '',
        remarks: '',
        shortName: '',
        direction: '',
        creatorID: '',
        catalogID: '',
        chkState: ''
      }
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-form-item__label {
  font-size: 14px;
}
.el-select {
  width: 100%;
}
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.form {
  margin-top: 15px;
}
</style>
